<template>
	<view class="container">
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lowerBot" scroll-with-animation>
					<view class='content'>
						<view v-if="listIndex == 0">
							<!-- <image src="/static/login/one.png" class="oneImg m-b-30" mode=""></image> -->
							<image :src="imgList[0]" class="oneImg" mode=""></image>
							<!-- <view class="study m-t-30 m-b-30">
								一站式读书
							</view>
							<view class="topDu">
								人之气质，由于天生，本难改变，唯读书
							</view>
							<view class="topDu m-b-40">
								则可以变其气质
							</view> -->
							<view class="stepBar f f-a-c f-j-b">
								<view class="stepBarItem active">

								</view>
								<view class="stepBarItem">

								</view>
								<view class="stepBarItem">

								</view>
							</view>
							<!-- 立即跳过 -->
							<!-- <view @click="skipImmediately" class="skip">
								立即跳过
							</view> -->
						</view>
						<view v-if="listIndex == 1">
							<image :src="imgList[1]" class="oneImg2" mode="aspectFill"></image>
							<!-- 	<view class="study m-t-30 m-b-30">
								一站式读书
							</view>
							<view class="topDu">
								人之气质，由于天生，本难改变，唯读书
							</view>
							<view class="topDu m-b-40">
								则可以变其气质
							</view> -->
							<view class="stepBar f f-a-c f-j-b">
								<view class="stepBarItem">

								</view>
								<view class="stepBarItem active">

								</view>
								<view class="stepBarItem">

								</view>
							</view>
							<!-- 立即跳过 -->
							<!-- 	<view @click="skipImmediately" class="skip">
								立即跳过
							</view> -->
						</view>

						<view v-if="listItem.length===0">
							<image :src="imgList[2]" class="oneImg2" mode=""></image>
							<!-- 	<view class="study m-t-30 m-b-30">
							一站式读书
						</view>
						<view class="topDu">
							人之气质，由于天生，本难改变，唯读书
						</view>
						<view class="topDu m-b-40">
							则可以变其气质
						</view> -->
							<view class="stepBar f f-a-c f-j-b">
								<view class="stepBarItem ">

								</view>
								<view class="stepBarItem">

								</view>
								<view class="stepBarItem active">

								</view>
							</view>
							<!-- 立即跳过 -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view @click="skipImmediately" class="skip">
			立即跳过
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				tabss: ['头部1', '头部2'],
				isX: 0, //放在store统一管理
				isY: 999, //放在store统一管理
				tabTitle: ['选择一', '选择二', '选择三', '选择四'], //导航栏格式 --导航栏组件
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1], //第几个swiper的第几页
				list: [
					[1, 2, 3, 4, 5, 6],
					['a', 'b', 'c', 'd', 'e', 'f'],
					[]
				] //数据格式
			};
		},
		onLoad(e) {

		},
		onShow() {
			this.imgList = uni.getStorageSync('initData').setup_images
		},
		onHide() {},
		methods: {
			// 立即跳过
			skipImmediately() {
				let userinfo = uni.getStorageSync('userinfo')
				// 如果有门店就跳进首页
				console.log(userinfo, '123456');
				if (userinfo.profile) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					// 如果没门店就跳转门店
					uni.navigateTo({
						url: '/pageA/SelectStore'
					})
				}
			},
			dayin() {
				console.log('123456')
			},
			changeTab(index) {
				this.currentTab = index
			},
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.currentTab = e.detail.current
				console.log(e, '123');
				// this.$refs.navTab.longClick(index);
			},
			lowerBot() {
				console.log('到底');
			},

		}
	};
</script>

<style lang="scss" scoped>
	.skip {
		position: fixed;
		z-index: 9999;
		width: 194rpx;
		height: 64rpx;
		line-height: 64rpx;
		border: 2rpx solid #000000;
		border-radius: 34rpx;
		// margin-top: 400rpx;
		// font-size: 26rpx;
		// font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #000000;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		// margin-left: 50%;
		// transform: translateX(-50%);

	}

	.stepBar {
		position: fixed;
		bottom: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;

		.stepBarItem {
			width: 32rpx;
			height: 8rpx;
			background: #ececec;
			border-radius: 4rpx;
		}

		.active {
			background: #009D85;
		}
	}

	.topDu {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
	}



	.study {
		font-size: 32rpx;
		text-align: center;
		color: #000;
	}

	.oneImg {
		// width: 560rpx;
		// height: 416rpx;
		// margin-left: 50%;
		// transform: translateX(-50%);
		width: 100%;
		height: 100vh;
	}

	.oneImg2 {
		width: 100%;
		height: 100vh;
	}

	.addBtnBox {
		position: fixed;
		z-index: 900;
		width: 140rpx;
		align-items: flex-end;
		justify-content: center;
		height: 140rpx;
		display: flex;

		.addBtn {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			color: white;
			font-size: 10px;
			font-weight: bold;
			background: #444857;
			line-height: 100rpx;
			text-align: center;
			box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
		}
	}

	.container {
		width: 100vw;
		font-size: 28rpx;
		min-height: 100vh;
		overflow: hidden;
		color: #6B8082;
		position: relative;
		background-color: #f6f6f6;
	}

	.content {
		width: 100%;
		height: 100%;
		// margin-top: 100rpx !important;
	}

	.noCard {
		width: 90%;
		height: 200rpx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10rpx;
	}


	.nav {
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24rpx;
		background-color: #3ABAFB;
		z-index: 996;
	}

	.searchInput999 {
		width: 90%;
		margin: 0 auto;
		background: white;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56rpx;
	}

	.search999 {
		width: 32rpx;
		height: 32rpx;
	}

	.searchBox999 {
		width: 56rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input999 {
		color: #999;
		width: 80%;
	}
</style>